<template>
    <div class="bigbox">
        <div class="textheader">西宁市再生资源管理平台</div>
        <div class="tjbox">
            <div class="tjitem" v-for="(item, index) in totaldata">
                <div class="tjitem_title" :style="{ color: item.color }">
                    {{ item.name }}
                </div>
                <div>
                    <span class="tjitem_num">{{ item.number }}</span>
                    <span
                        style="
                            font-size: 0.2rem;
                            color: #fff;
                            margin-left: 0.1rem;
                        "
                        >{{ item.dw }}</span
                    >
                </div>
            </div>
        </div>

        <div class="contbox">
            <div class="contheader">
                <div class="lefthd">
                    <span>资源回收站点</span>
                    <el-select
                        v-model="search"
                        @change="getdata"
                        placeholder="请选择"
                        style="width: 1.2rem; margin-left: 0.2rem">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" />
                    </el-select>

                    <el-select
                        v-model="search2"
                        @change="getdata"
                        placeholder="请选择"
                        style="width: 1.2rem; margin-left: 0.2rem">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" />
                    </el-select>

                    <el-select
                        v-model="search3"
                        @change="getdata"
                        placeholder="区域"
                        style="width: 1.2rem; margin-left: 0.2rem">
                        <el-option
                            v-for="(item, index) in arealist"
                            :key="index"
                            :label="item.name"
                            :value="item.name" />
                    </el-select>

                    <el-select
                        v-model="search4"
                        @change="getdata"
                        placeholder="请选择"
                        style="width: 1.2rem; margin-left: 0.2rem">
                        <el-option
                            v-for="item in options4"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="righthd">
                    <div class="tipsbox">
                        <div class="yuan"></div>
                        <div style="color: #00fc65">在线</div>
                    </div>
                    <div class="tipsbox" style="margin-left: 0.15rem">
                        <div
                            class="yuan"
                            style="background-color: #ff0000"></div>
                        <div style="color: #ff0000">离线</div>
                    </div>
                </div>
            </div>

            <div class="contbody">
                <div
                    style="
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    ">
                    <div class="continner">
                        <div
                            class="shubox"
                            v-for="(item, index) in tabledata"
                            :key="index">
                            <div
                                class="contitem"
                                :class="item2.sfzx == 1 ? 'lixbox' : ''"
                                v-for="(item2, index2) in item"
                                :key="index2">
                                <div class="status">
                                    <div
                                        class="yuan"
                                        :style="{
                                            'background-color':
                                                item2.sfzx == 1
                                                    ? '#ff0000'
                                                    : '#00fc65',
                                        }"></div>
                                    <div
                                        :style="{
                                            color:
                                                item2.sfzx == 1
                                                    ? '#ff0000'
                                                    : '#00fc65',
                                            'font-size': '0.14rem',
                                        }">
                                        {{ item2.sfzx == 1 ? "离线" : "在线" }}
                                    </div>
                                </div>
                                <div class="namebox">
                                    {{ item2.name }}
                                </div>
                                <div
                                    v-if="item.length == 1"
                                    class="oneitem"></div>
                                <div class="infobox">
                                    <div class="infobox_item">
                                        <div class="infobox_item_title">
                                            状态：
                                        </div>
                                        <div
                                            class="infobox_item_text"
                                            :style="{
                                                color:
                                                    item2.sfzx == 1
                                                        ? '#ff0000'
                                                        : '#00fc65',
                                            }">
                                            {{
                                                item2.sfzx == 1
                                                    ? "离线"
                                                    : "在线"
                                            }}
                                        </div>
                                    </div>
                                    <div class="infobox_item">
                                        <div class="infobox_item_title">
                                            公司名称：
                                        </div>
                                        <div class="infobox_item_text">
                                            {{ item2.name }}
                                        </div>
                                    </div>
                                    <div class="infobox_item">
                                        <div class="infobox_item_title">
                                            公司地址：
                                        </div>
                                        <div class="infobox_item_text">
                                            {{ item2.address }}
                                        </div>
                                    </div>
                                    <div class="infobox_item">
                                        <div class="infobox_item_title">
                                            所属地区：
                                        </div>
                                        <div class="infobox_item_text">
                                            {{ item2.province }}{{ item2.city
                                            }}{{ item2.area }}
                                        </div>
                                    </div>
                                    <div class="infobox_item">
                                        <div class="infobox_item_title">
                                            联系人：
                                        </div>
                                        <div class="infobox_item_text">
                                            {{ item2.contact }}
                                        </div>
                                    </div>
                                    <div class="infobox_item">
                                        <div class="infobox_item_title">
                                            联系电话：
                                        </div>
                                        <div class="infobox_item_text">
                                            {{ item2.telphone }}
                                        </div>
                                    </div>
                                    <div
                                        class="infobox_item"
                                        style="
                                            display: flex;
                                            justify-content: flex-end;
                                        ">
                                        <el-button type="success" @click="showjk(item2,index2)"
                                            >实时监控</el-button
                                        >
                                    </div>
                                </div>
                            </div>
                            <div v-if="item.length == 2" class="twobox"></div>
                            <div v-if="item.length == 3" class="threebox">
                                <div class="midyq"></div>
                            </div>
                        </div>
                    </div>

                    <div style="width: 35%; height: 100%;">
                        <mymap ref="mapref"></mymap>
                    </div>
                </div>

                <div
                    style="
                        width: 100%;
                        display: flex;
                        justify-content: flex-end;
                    ">
                    <el-pagination
                        background
                        v-model:current-page="pages"
                        layout="total,prev, pager, next "
                        :total="total"
                        @current-change="getdata" />
                </div>
            </div>
        </div>

        <el-dialog
      :title="videotitle"
      v-model="dialogVisible"
      :before-close="setimg"
      width="60%"
      :destroy-on-close="true"
    >
      <div>
        <iframe
          :src="
            'https://open.ys7.com/ezopen/h5/iframe?url=' +
            videoUrl +
            '&autoplay=1&accessToken=' +
            video_token
          "
          width="100%"
          height="650"
          id="ysOpenDevices"
          ref="myzbo"
          allowfullscreen
        >
        </iframe>
      </div>
    </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, provide } from "vue";
import Table from "@/components/Table.vue";
import { post } from "../../../api/request";
import { ElMessage, ElMessageBox } from "element-plus";
import mymap from './map.vue'
import axios from 'axios';

let totaldata = ref([
    {
        name: "站点总数",
        number: 400,
        dw: "家",
        color: "#fff",
    },
    {
        name: "在线总数",
        number: 390,
        dw: "家",
        color: "#00FC65",
    },
    {
        name: "离线总数",
        number: 10,
        dw: "家",
        color: "#FF0000",
    },
    {
        name: "在线率",
        number: 90,
        dw: "%",
        color: "#fff",
    },
]);

let search = ref("");
let options = ref([
    {
        value: "",
        label: "全部站点",
    },
    {
        value: "1",
        label: "离线站点",
    },
    {
        value: "2",
        label: "在线站点",
    },
]);
let search2 = ref("网点");
let options2 = ref([    
    {
        value: "公司",
        label: "公司",
    },
    {
        value: "网点",
        label: "网点",
    },
]);
let search3 = ref("");
let arealist = ref([]);

let search4 = ref("");
let options4 = ref([
    {
        value: "",
        label: "全部资金",
    },
    {
        value: "1",
        label: "10万以下",
    },
    {
        value: "2",
        label: "10万-50万",
    },
    {
        value: "3",
        label: "50万-100万",
    },
    {
        value: "4",
        label: "100万以上",
    },
]);
let maplistdata = ref<any>([]);
let mapref = ref<any>(null);
let tabledata = ref([]);
let pages = ref(1);
let total = ref(0);

let videotitle = ref('');
let dialogVisible = ref(false);
const setimg = () => {
  dialogVisible.value = false;
};

provide("videotitle", videotitle);
provide("dialogVisible", dialogVisible);
provide("setimg", setimg);
provide("videoref", mapref);

onMounted(() => {
    getdata();
    getheaderdata();

    post({
        url: "/api/area/index",
        data: {
            parent_id: 3022,
        },
    }).then((res: any) => {
        let obj = {
            name:'全部',
            code:'',
            id:''
        }
        res.data.list.unshift(obj);
        arealist.value = res.data.list;
    });


    //获取监控
    getvideo()

});

let video_token = ref('')
let videoUrl = ref('')



const showjk=(item:any,index:number)=>{
    getVideoUrl(item.xlh,1)
    videotitle.value = item.name
}

const getvideo = async ()=>{
   let res =  await axios.get('https://ys-cloud-video.zhihuiqinghai.com/api/index/get_access_token');
   video_token.value = res.data.data.access_token   
}

const getVideoUrl = (code:any,td: any) => {
  axios
    .post(
      "https://open.ys7.com/api/lapp/v2/live/address/get?accessToken=" +
      video_token.value +
        "&deviceSerial=" +
        code +
        "&channelNo=" +
        td +
        "&type=1"
    )
    .then((response) => {
      console.log(response);
      if (response.data.code == "200") {
        videoUrl.value = response.data.data.url        
        dialogVisible.value = true
      }else{
        ElMessage.error("设备不在线!");
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const getheaderdata = () => {
    post({
        url: "/api/hut/sydb",
        data: {},
    }).then((res: any) => {
        totaldata.value[0].number = res.data.zdzs;
        totaldata.value[1].number = res.data.zxzs;
        totaldata.value[2].number = res.data.lxzx;
        totaldata.value[3].number = res.data.zxl;
    });
};

const getdata = () => {
    post({
        url: "/api/hut/index",
        data: {
            sfzx: search.value, //搜索在线离线
            type: search2.value,
            area: search3.value=='全部'?'':search3.value,
            zczj: search4.value,
            p: pages.value, //当前页数
            size: 12, //每页显示数量
        },
    }).then((res: any) => {
        total.value = res.data.count;
        tabledata.value = groupArrayElements(res.data.list, 3);
    });
};

// 一个函数，将原始数组按照指定大小分组
const groupArrayElements = <T>(
    array: Array<T>,
    groupSize: number
): Array<Array<T>> => {
    // 结果数组
    let result: Array<Array<T>> = [];

    // 遍历数组，每次跳过groupSize个元素
    for (let i = 0; i < array.length; i += groupSize) {
        // 使用slice方法提取子数组，并将其添加到结果数组中
        let group = array.slice(i, i + groupSize);
        result.push(group);
    }

    return result;
};
</script>

<style lang="scss" scoped>
@import "./home.scss";
</style>
